// components/color-picker/color-picker.js

const { debounce, hue2RGB, rgb2Hex } = require('./utils/util')

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    offsetX: {
      type: Number,
      value: 0
    },
    height: {
      type: Number,
      value: 25
    },
    background:{
      type:String,
      value:""
    },
    radius: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    wxsProps: {}
  },
  lifetimes: {
    created: function() {

    },
    ready: function () {
      this.createSelectorQuery().select('.color-picker-container').boundingClientRect().exec((e) => {
        const bound = e[0]
        const {
          width
        } = bound
        this.setData({
          wxsProps: {
            ...this.data,
            width
          },
          width
        })
      })
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    _debounceThrow: debounce((that, e) => {
      // console.log('_debounceThrow', that, e);
      that._throw(e)
    }, 100),
    _throw: function(eventName) {
      const { rgbColor, hexColor, hue, offsetX } = this
      this.triggerEvent(eventName, {
        eventName,
        rgbColor,
        hexColor,
        hue,
        offsetX
      }, {bubbles: true, composed: true})
    },
    __test: function(obj) {
      const {
        offsetX,
        touchType
      } = obj;
      if (touchType === 'touchend') {
        this._throw('pickingend')
        return
      }
      const {
        width
      } = this.data
      const h = offsetX / width * 360
      const rgb = hue2RGB(h)
      const hex = rgb2Hex(rgb)
      this.offsetX = offsetX
      this.rgbColor = rgb
      this.hexColor = hex
      this.hue = h
      if (touchType === 'touchstart') {
        this._throw('pickingstart')
      } else if (touchType === 'touchmove') {
          this._throw('picking')
      }
    }
  }
})